<template>
  <div class="app-container">
    id:{{ route.params.id }}
    <el-form v-loading="infoLoad">
      <el-row>
        <el-col :span="24">
          <el-form-item label="岗位标题:" prop="title">
            {{ jobInfo.title }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="岗位名称:" prop="name">
            {{ jobInfo.name }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业类型:" prop="type">
            <DictLabel v-model="jobInfo.type" code="JOB_TYPE" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="薪资范围:" prop="hourlyWage">
            {{ jobInfo.hourlyWage }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="结算方式:" prop="settlement">
            <DictLabel v-model="jobInfo.settlement" code="SETTLEMENT" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历要求:" prop="educational">
            <DictLabel v-model="jobInfo.educational" code="EDUCATIONAL" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="岗位描述:" prop="description">
            <QuillViewer v-model="jobInfo.description" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="工作时间:" prop="workTime">
            {{ jobInfo.workTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作时段:" prop="workHours">
            {{ jobInfo.workHours }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工作要求:" prop="jobRequirements">
            <QuillViewer v-model="jobInfo.jobRequirements" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工作地点:" prop="workLocation">
            {{ jobInfo.workLocation }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="福利待遇:" prop="welfare">
            {{ jobInfo.welfare }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="jobInfo.publishTime" :span="6">
          <el-form-item label="发布时间:" prop="welfare">
            {{ jobInfo.publishTime }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import JobApi, { JobVO } from "@/api/job/job.api";

defineOptions({
  name: "Application",
  inheritAttrs: false,
});

const jobId = ref();
const infoLoad = ref(false);

const jobInfo = reactive<JobVO>({});

const route = useRoute();

// 查询
function handleQuery() {
  infoLoad.value = true;
  if (jobId.value) {
    JobApi.getById(jobId.value)
      .then((data) => {
        Object.assign(jobInfo, data);
      })
      .finally(() => {
        infoLoad.value = false;
      });
  }
}

onMounted(() => {
  console.log(route.params);
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
